<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>组合搭配</title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="/public/static/plug/ydui/ydui.rem.css" />
  <link rel="stylesheet" href="/public/static/css/demo.css" />
  <!-- 引入rem自适应类库 -->
  <script src="/public/static/plug/ydui/ydui.flexible.js"></script>
  <!-- 数据请求 -->
  <script src="/public/static/plug/jquery/jquery.min.js"></script>
</head>

<body>
  <div id="category" v-cloak>
    <div class="yd-scrolltab">
      <div class="yd-scrolltab-nav">
        <yd-accordion accordion>
          <yd-accordion-item
            v-for="(item, index) in navItem" 
            :key="index" 
            :title="item.cate_name"
            :open="index == 0 ? true : false">
              <a href="javascript:;" class="yd-scrolltab-item"
                v-for="(cate, i) in item.sub_cate_list" :key="i" 
                :class="{'yd-scrolltab-active': cate.id == active}" 
                @click="queryData(cate)">
                <div class="yd-scrolltab-title">{{cate.cate_name}}</div>
              </a>   
          </yd-accordion-item>
        </yd-accordion>
      </div>
      <div class="yd-scrolltab-content">
        <yd-infinitescroll 
          :callback="getList" 
          :scroll-top="true"
          ref="infinitescroll">
            <yd-list slot="list">
                <yd-list-item v-for="item, key in list" :key="key" @click.native="goTo(item.id)">
                    <img slot="img" :src="item.image">
                    <p slot="title">{{item.store_name}}</p>
                    <yd-list-other slot="other">
                        <span class="price"><em>¥</em>{{item.price}}</span>
                        <span>已售{{item.sales}}件</span>
                    </yd-list-other>
                    <yd-list-other slot="other">
                        <span>{{item.comment_count}}条评价</span>
                        <span>{{item.fav_comment_rate}}%好评</span>
                    </yd-list-other>
                </yd-list-item>
            </yd-list>
    
            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">加载完成</span>
    
            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
        </yd-infinitescroll>
      </div>
    </div>
  </div>
  
  <!-- 引入 Vue -->
  <script src="/public/static/plug/vue/dist/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="/public/static/plug/ydui/ydui.rem.js"></script>
  <script>
    new Vue({
      el: '#category',
      data() {
        return {
          navItem: [],
          show: true,
          list: [],
          active: 0,
          flag: false,
          filter: {
            page: 1,
            pageSize: 10,
          }
        }
      },
      mounted() {
        
      },
      created() {
        this.init();
      },
      methods: {
        queryData(item) {
          // this.navItem[0].sub_cate_list && this.navItem[0].sub_cate_list[0].id
          this.active = item.id;
          this.flag = true;
          this.filter.id = item.id;
          this.getList(this.filter);
        },
        getList(params = {}) {
          this.$dialog.loading.open('正在加载');
          Object.assign(this.filter, params);

          if (this.flag) {
              this.toSrollTop();
          }

          $.ajax('http://test.hzyctools.com/wap/public_api/get_product_list', {
            data: {
              id: this.filter.id,
              page_num: this.flag ? 1 : this.filter.page,
              page_size: this.filter.pageSize
            },
            dataType: 'jsonp',
            crossDomain: true,
            success: ((res) => {
              if (res.code === 200) {
                this.$dialog.loading.close();
                let data = res.data;
                if (data) {
                  let _list = data.list;
                  if (!this.flag) {
                    this.list = [...this.list, ..._list];
                    this.filter.page++;
                  } else {
                    this.list = _list;
                    this.filter.page = 2;
                    this.flag = false;
                  }

                  if (_list.length < this.filter.pageSize) {
                      /* 所有数据加载完毕 */
                      this.$refs.infinitescroll.$emit('ydui.infinitescroll.loadedDone');
                      return;
                  }
                  /* 单次请求数据完毕 */
                  this.$refs.infinitescroll.$emit('ydui.infinitescroll.finishLoad');
                }
              } else {
                this.$dialog.loading.open('加载失败~');
                setTimeout(() => {
                  this.$dialog.loading.close();
                }, 1000);
              }
            })
          })  
        },
        toSrollTop(){
          let scrollContent = document.getElementsByClassName('yd-scrolltab-content')[0];
          return scrollContent.scrollTop = 0;
        },
        goTo(id) {
          window.location.href = 'http://test.hzyctools.com/wap/store/detail/id/' + id;
        },
        init() {
          this.$dialog.loading.open('正在加载');
          $.ajax('http://test.hzyctools.com/wap/public_api/get_cate_list', {
            dataType: 'jsonp',
            crossDomain: true,
            success: ((res) => {
              if (res.code === 200) {
                this.$dialog.loading.close();
                let data = res.data;
                if (data) {
                  this.navItem = data.list;
                  this.queryData(this.navItem[0].sub_cate_list && this.navItem[0].sub_cate_list[0]);
                }
              } else {
                this.$dialog.loading.open('加载失败~');
                setTimeout(() => {
                  this.$dialog.loading.close();
                }, 1000);
              }
            })
          })
        },
       }
    })

  </script>
  {include file="public/right_nav" /}
</body>

</html>
